<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>用户注册验证的设计与实验</title>
	</head>
	<style>
		//样式设计  
		//219971201毕潇元
		body{ 
			background-color: azure; 
			background-size: cover;
			background-repeat: no-repeat;
		}
		form{
			max-width:400px ;
			height: 350px;
			background-color: aliceblue;
			border: 1px ;
			margin: 100px auto;
			color: black;
			border-radius: 5px;
			padding: 25px 45px;	
		}
		div{
			width: 100%;
			height: 35px;
			line-height: 35px;
			margin-top: 20px;	
		    position: relative;
		}
		input{
			position: absolute;
			right: 80px;
			width: 60%;
			height: 25px;
			line-height: 25px;
			border: 1px sandybrown;
			color: #888;
			font-size: 12px;
			padding: 3px 3px 3px 5px;
			box-shadow: inset 0px 1px 4px;
		}
		input[type="submit"]{
			width: 50%;
			height: 40px;
			line-height: 15px;
			font-size: 15px;
			background-color: beige;
			border: none;
			box-shadow:none;
			border-radius: 10px;
			color: black;
			position: relative;
			top: 50px;
			left: 50%;
			transform: translateX(-50%);
		}
		input[type="submit"]:hover{
			cursor: pointer;
			background-color: skyblue;
		}
	</style>
	<body>
		<form action="" method="">
			<div>
			    <label for = "name">用户名：</label>
			    <input type="text" id="name" name = "name" placeholder="请输入用户名" required>
			</div>
			<div>
			<p>输入密码：<input type="password" id="pwd1"  name="pwd1" onblur="isPwd()" /><br/>
			    <span id="pwd1Span"  style="color: red;font-family: 楷体"></span></p>
			<p>确认密码：<input type="password" id="pwd2"  name="pwd2" onblur="isCom()" /><br/>
			    <span id="pwd2Span" style="color: red;font-family: 楷体"></span></p>
			<div>
				<label for = "pass">邮&nbsp;&nbsp;&nbsp;箱：</label>
				<input type="password" id="pass" name = "pass" placeholder="请输入邮箱" pattern="[^@]*@[^@]*[\.com$]" required>
			</div>	
			<input type="submit" value="注册" name="reg">
		</form>
		<script>
				//密码校验
		    function isPwd(){
		       var text= document.getElementById("pwd1").value;
		       var re =/^(?=.*[a-z])(?=.*\d)[^]{8,16}$/;
		       var result =  re.test(text);
		    if(!result) {
		        document.getElementById("pwd1Span").innerHTML = "密码必须包含数字,字母,且不少于8位";
		        return false;
		        }else {
		            document.getElementById("pwd1Span").innerHTML = "";
		            return true;
		        }
		    };
		        //确认密码
		     function isCom(){
		        var text1= document.getElementById("pwd1").value;
		        var text2= document.getElementById("pwd2").value;
		    if (text2 == text1){
		            document.getElementById("pwd2Span").innerHTML = "";
		            return true;
		        }else {
		            document.getElementById("pwd2Span").innerHTML = "两次输入的密码不一致";
		            return false;
		        }
		    };
		    </script>
	</body>
</html>